<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 215px;
				overflow: auto;
			}
			.mui-control-content .show-list {
				margin-top: 50px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav xq-window-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">浏览历史</h1>
			<a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id='history-clean-btn'>清空</a>
		</header>
		<div class="mui-content">
			<div id="main-content-slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#shiwen-history">诗文</a>
					<a class="mui-control-item" href="#sentence-history">名句</a>
					<a class="mui-control-item" href="#writer-history">作者</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="shiwen-history" class="mui-slider-item mui-control-content">
						<ul id="history-shiwen-list-ul" class="mui-table-view">
							<li v-for="(itemInfo,index) in shiwenList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
								<a>
									<div class="mui-media-body">
										<div class="xq-media-body-title-line">
											<div class="left-title">{{itemInfo.title}}</div>
											<div class="right-title">[{{itemInfo.dynasty}}] {{itemInfo.writer}}</div>
										</div>
										<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.shortContent}}</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div id="sentence-history" class="mui-slider-item mui-control-content">
						<ul id="history-sentence-list-ul" class="mui-table-view">
							<li class="mui-table-view-cell" v-for="(itemInfo,index) in sentenceList" :index="index">
								<a>
									<div class="mui-media-body">
									<div class="xq-media-body-title-line">
										<div class="left-title">{{itemInfo.gushiwenTitle}}</div>
										<div class="right-title">{{itemInfo.writerName}}</div>
									</div>
									<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.name}}</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div id="writer-history" class="mui-slider-item mui-control-content">
						<ul id='writer-result-list-ul' class="mui-table-view" v-cloak>
							<li v-for="(itemInfo,index) in writerList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
								<a>
									<img class="mui-media-object mui-pull-left xq-circle-img" :src="itemInfo.headImageUrl" />
									<div class="mui-media-body">
										<div class="xq-media-body-title-line">
											<div class="left-title">{{itemInfo.name}}</div>
											<div class="right-title">{{itemInfo.dynasty}}</div>
										</div>
										<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.simpleIntro}}</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/shiwenListLoader.js"></script>
		<script src="../js/sentenceListLoader.js"></script>
		<script src="../js/writerListLoader.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.ready(function(){
				if(mui.os.plus){
					return;
				}
				initHistoryPage();
			});
			
			mui.plusReady(function(){
				initHistoryPage();
			});
			
			function initHistoryPage(){
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("historyPage");
				SettingInfoManager.setPageFontFromSetting();
				//
				var shiwenListLoaderConfig={
					appVMConfig:{el:'#shiwen-history'},
					itemContentEl:"#shiwen-history",
					loadParam:{pageSize:50}
				}
				var shiwenListLoader=new ShiwenListLoader();
				shiwenListLoader.init(shiwenListLoaderConfig);
				var historyShiwenIdList=SettingInfoManager.getHistoryInfo(SettingInfoManager.settingName.historyShiwen);
				//historyShiwenIdList=[1,2];
				if(historyShiwenIdList && historyShiwenIdList.length>0){
					var shiwenListLoadParam = shiwenListLoader.getLoadParam();
					var historyShiwenIdStr=historyShiwenIdList.join(',');
					console.log(historyShiwenIdStr);
					shiwenListLoadParam.idList=historyShiwenIdStr;
					shiwenListLoader.loadShiwenList();
				}
				//
				var sentenceListLoaderConfig={
					appVMConfig:{el:'#sentence-history'},
					itemContentEl:"#sentence-history",
					loadParam:{pageSize:50}
				}
				var sentenceListLoader=new SentenceListLoader();
				sentenceListLoader.init(sentenceListLoaderConfig);
				var historySentenceIdList=SettingInfoManager.getHistoryInfo(SettingInfoManager.settingName.historySentence);
				if(historySentenceIdList && historySentenceIdList.length>0){
					var sentenceListLoadParam = sentenceListLoader.getLoadParam();
					var historySentenceIdStr=historySentenceIdList.join(',');
					sentenceListLoadParam.idList=historySentenceIdStr;
					sentenceListLoader.loadSentenceList();
				}
				//
				var writerListLoaderConfig={
					appVMConfig:{el:'#writer-result-list-ul'},
					itemContentEl:"#writer-result-list-ul",
					loadParam:{pageSize:50}
				}
				var writerListLoader=new WriterListLoader();
				writerListLoader.init(writerListLoaderConfig);
				var historyWriterIdList=SettingInfoManager.getHistoryInfo(SettingInfoManager.settingName.historyWriter);
				if(historyWriterIdList && historyWriterIdList.length>0){
					var writerListLoadParam = writerListLoader.getLoadParam();
					var historyWriterIdStr=historyWriterIdList.join(',');
					writerListLoadParam.idList=historyWriterIdStr;
					writerListLoader.loadWriterList();
				}
				//
				$('#history-clean-btn').on('tap',function(e){
					var msg="您是否要清空【诗文】【名句】及【作者】的浏览历史？";
					mui.confirm(msg,"提醒",['否','是'],function(e){
						if (e.index == 1) {
							SettingInfoManager.removeItem(SettingInfoManager.settingName.historyShiwen);
							SettingInfoManager.removeItem(SettingInfoManager.settingName.historySentence);
							SettingInfoManager.removeItem(SettingInfoManager.settingName.historyWriter);
							$("#history-shiwen-list-ul").empty();
							$("#history-sentence-list-ul").empty();
							$("#writer-result-list-ul").empty();
							mui.toast('设置成功',{ duration:'long', type:'div' });
						}
					},'div');
					
				});
				initElemsSize();
			}
			
			function initElemsSize(){
				var winH=$(window).height();
				$('.mui-control-content').css('height',(winH-84)+'px');
			}
			
			function loadHistoryShiwen(){
				var historyList=SettingInfoManager.getHistoryInfo(SettingInfoManager.settingName.historyShiwen);
				if(historyList && historyList.length>0){
					var historyListStr=historyList.join(',');
					var shiwenListLoadParam={pageNo:1,idList:historyListStr};
					var url=getShiciServiceHost()+'/shici/gushiwen/list';
					muiAjaxGetJsonData({
						url:url,
						data:shiwenListLoadParam,
						callback:function(data){
							if(data.entry){
								if(data.entry.dataList && data.entry.dataList.length>0){
									mui.each(data.entry.dataList,function(index,itemInfo){
									  addShiwenItemToList($("#history-shiwen-list-ul"),itemInfo)
									});
								}
							}
						},
					});
				}
			}
			
			function loadHistorySentence(){
				var historyList=SettingInfoManager.getHistoryInfo(SettingInfoManager.settingName.historySentence);
				if(historyList && historyList.length>0){
					var historyListStr=historyList.join(',');
					var shiwenListLoadParam={pageNo:1,idList:historyListStr};
					var url=getShiciServiceHost()+'/shici/sentence/list';
					muiAjaxGetJsonData({
						url:url,
						data:shiwenListLoadParam,
						callback:function(data){
							if(data.entry){
								if(data.entry.dataList && data.entry.dataList.length>0){
									mui.each(data.entry.dataList,function(index,itemInfo){
									  addSentenceItemToList($("#history-sentence-list-ul"),itemInfo)
									});
								}
							}
						},
					});
				}
			}
			
			function addShiwenItemToList(ulEle,itemInfo){
				var firstSentence=getFirstSentence(itemInfo.shortContent);
				firstSentence=firstSentence||'';
				var itemEle=
				'<li class="mui-table-view-cell" info-id="'+itemInfo.id+'" info-title="'+itemInfo.title+'">'
					+'<a>'
						+'<div class="mui-media-body">'
						+'<div class="xq-media-body-title-line">'
							+'<div class="left-title">'+itemInfo.title+'</div>'
							+'<div class="right-title">'+'['+itemInfo.dynasty+']'+itemInfo.writer+'</div>'
						+'</div>'
						+'<div class="mui-ellipsis xq-media-body-sub-detail">'+firstSentence.trim()+'</div>'
						+'</div>'
					+'</a>'
				+'</li>';
				$(ulEle).append(itemEle);
			}
			
			function addSentenceItemToList(ulEle,itemInfo){
				var firstSentence=getFirstSentence(itemInfo.shortContent);
				firstSentence=firstSentence||'';
				var itemEle=
				'<li class="mui-table-view-cell" info-id="'+itemInfo.id+'" info-title="'+itemInfo.gushiwenTitle+'">'
					+'<a>'
						+'<div class="mui-media-body">'
						+'<div class="xq-media-body-title-line">'
							+'<div class="left-title">'+itemInfo.gushiwenTitle+'</div>'
							+'<div class="right-title">'+itemInfo.writerName+'</div>'
						+'</div>'
						+'<div class="mui-ellipsis xq-media-body-sub-detail">'+itemInfo.name.trim()+'</div>'
						+'</div>'
					+'</a>'
				+'</li>';
				$(ulEle).append(itemEle);
			}
		</script>
	</body>

</html>
